<template>
    <div class="container">
        <header>
            <span class="title">文章列表</span>
            <router-link to="/home/active/articleadd"></router-link>
        </header>
        <div>
            <table border="1">
                <tr>
                    <td>序号</td>
                    <td>标题</td>
                    <td>发表日期</td>
                    <td>作者</td>
                    <td>摘要</td>
                </tr>
                <tr v-for="(active, index) in     acticleList    " :key='index'>
                    <td>{{ index + 1 }}</td>
                    <td>
                        <router-link :to='{ path: "/home/article/articledetail", query: active }'>{{ active.title
                        }}</router-link>
                    </td>
                    <td>
                        {{ active.pdate }}
                    </td>
                    <td>
                        {{ active.author }}
                    </td>
                    <td>
                        {{ sub(active.content) }}
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { RouterLink } from 'vue-router';
const acticleList = ref([])
onMounted(() => {
    acticleList.value = JSON.parse(window.localStorage.getItem('articlelist'))
})
const sub = (content) => {
    return content.substring(0, 7) + '...'
}
</script>

<style scoped>
.container {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.title {
    font-size: 24px;
    font-weight: bolder;
    padding-right: 10px;
}
</style>